<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        if (self != top) {
            window.parent.location.href='/login';
        }
    </script>
    <title>系统登录 - 账务邦服务平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*登录页面*/
        .login_bg {
            background: url("images/loginBg.jpg") 0 0 repeat-x;
        }

        .loginBox {
            width: 1000px;
            margin: 0 auto;
            background: url("images/login_bg.jpg") 0 0 no-repeat;
        }

        .loginHeader {
            padding-top: 102px;
            text-align: center;
            padding-bottom: 30px;
        }

        .loginHeader h1 {
            color: #fff;
            text-shadow: 2px 2px #000;
        }

        .loginCont {
            width: 388px;
            height: 284px;
            /*border: 1px solid red ;*/
            margin: 0 auto;
        }

        /*输入框里默认输入字体*/
        ::-webkit-input-placeholder {
            color: rgb(190, 188, 188);
            /*font-style: italic;*/
        }

        input:-moz-placeholder,
        textarea:-moz-placeholder {
            color: rgb(190, 188, 188);
            font-style: italic;
        }

        input {
            outline: none;
        }
        .loginForm {
            background: url("images/formBg.png") 0 0 no-repeat;
            background-size:100% 100%;
            width: 320px;
            height: 140px;
            border-radius: 8px;
            padding: 90px 38px 48px 30px;
            /*border: 1px solid green;*/
        }
        .changePassForm {
            height: 260px;
        }

        .loginForm label {
            width: 20%;
            display: inline-block;
        }

        .inputBox {
            height: 60px;
        }

        .inputBox input {
            width: 66%;
            padding: 10px 5px 10px 20px;
            border: 1px solid rgb(178, 178, 178);
            border-radius: 3px;
            -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
            -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
            box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;

        }

        /*输入框得到焦点的效果*/
        .inputBox input:active, .providerAdd input:focus,
        .inputBox input:focus {
            border: 1px solid rgba(91, 90, 90, 0.7);
            background: rgba(238, 236, 240, 0.2);
            -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
            -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
            box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
        }


        /* 登录页登录 */
        input[type='submit'], input[type='reset']{
            width: 30%;
            cursor: pointer;
            background: #54a4d7;
            padding: 6px 18px;
            font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
            color: #fff;
            font-size: 18px;
            border: 1px solid #4682be;
            margin-bottom: 10px;
            margin-right: 22px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
            0px 0px 0px 3px rgb(254, 254, 254),
            0px 5px 3px 3px rgb(210, 210, 210);
            -moz-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
            0px 0px 0px 3px rgb(254, 254, 254),
            0px 5px 3px 3px rgb(210, 210, 210);
            box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.07) inset,
            0px 0px 0px 3px rgb(254, 254, 254),
            0px 5px 3px 3px rgb(210, 210, 210);

        }

        input[type='submit'], input[type='reset']:hover{
            background: rgb(74, 179, 198);
        }

        input[type='submit']:active, input[type='submit']:focus{
            background: #2a5989;
            border: 1px solid rgb(12, 76, 87);
            -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
            -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
            box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
        }
    </style>
</head>
<body class="login_bg">
    <section class="loginBox">
        <header class="loginHeader">
            <h1>账务邦服务平台</h1>
        </header>
        <section class="loginCont">
            <form class="loginForm">
                <div class="inputBox account">
                    <label for="user">帐号：</label>
                    <input id="user" type="text" name="username" placeholder="请输入帐号" required/>
                </div>
                <div class="inputBox oldPass" style="display: none;">
                    <label for="oldPassword">旧密码：</label>
                    <input id="oldPassword" type="password" name="oldPassword" placeholder="请输入旧密码"/>
                </div>
                <div class="inputBox">
                    <label for="password">密码：</label>
                    <input id="password" type="password" name="password" placeholder="请输入密码" required/>
                </div>
                <div class="inputBox confirmPassword" style="display: none;">
                    <label for="confirmPassword">确认：</label>
                    <input id="confirmPassword" type="password" name="confirmPassword" placeholder="请再次输入密码"/>
                </div>
                <div id="info" style="color: red;"></div>
                <div style="text-align:center;">
                    <input class="loginBtn" type="submit"  value="登录" />
                    <input type="reset" class="changePasswordBtn" value="修改密码"/>
                </div>
            </form>
        </section>
    </section>
<script type="text/javascript">
	// var httpRequest = null;
	// function SendRequest () {
	// 	if (httpRequest) {
	// 		// The requested file must be in the same domain that the page is served from.
	// 		var url = "/";
	// 		httpRequest.open ("GET", url, true);    // async
	// 		httpRequest.setRequestHeader ("Authorization", "abcd");
	// 		httpRequest.onreadystatechange = OnStateChange;
	// 		httpRequest.send (null);
	// 	}
	// }
	(function ($) {
        $(document).ready(function () {
	        $('.loginForm').on('submit',function (event) {
	        	let url ='',data,type ;
	        	if($('.oldPass:visible').length > 0){
	        		if($('#confirmPassword').val()=='' || $('#confirmPassword').val()!=$('#password').val()){
				        $("#info").text('新密码与确认密码不一致');
				        event.preventDefault();
				        return;
                    }
	        		url = '/users/' + $("#user").val() + '/password';
	        		data = {oldPass:$("#oldPassword").val(),pass:$("#password").val()};
			        type = 'put';
                }else {
			        url = "/login";
			        data = {account:$("#user").val(),pass:$("#password").val()};
			        type = 'post';
                }

		        $.ajax({
			        cache: true,
			        type: type,
			        timeout: 2000,
			        url: url,
			        data: data,
			        async: false, // 异步
			        error: function (xhr, statusText, errorThrown) { // XMLHttpRequest
				        // alert("错误提示： status:" + xhr.status + " responseText:" + xhr.responseText);
				        $("#info").text('帐号或密码错误');
			        },
			        success: function (result, statusText, xhr) {
				        if($('.oldPass:visible').length > 0){
					        $('.oldPass').hide();
					        $('.confirmPassword').hide();
					        $('.changePasswordBtn').val('修改密码');
					        $('#password').attr('placeholder','请输入密码');
					        $('.loginForm').removeClass('changePassForm');
					        $('.loginBtn').val('登录');
					        $('#oldPassword').removeAttr("required");
					        $('#confirmPassword').removeAttr("required");
					        $("#info").text('密码修改成功,请重新登录');
					        return;
				        }
				        window.location.href = '/';
			        }
		        });
		        event.preventDefault();
	        });
	        $('.loginForm .changePasswordBtn').on('click',function (event) {
	        	if($('.oldPass:visible').length > 0){
			        $('.oldPass').hide();
			        $('.confirmPassword').hide();
			        $('.changePasswordBtn').val('修改密码');
			        $('#password').attr('placeholder','请输入密码');
			        $('.loginForm').removeClass('changePassForm');
			        $('.loginBtn').val('登录');
			        $('#oldPassword').removeAttr("required");
			        $('#confirmPassword').removeAttr("required");
                }else {
			        $('.oldPass').show();
			        $('.confirmPassword').show();
			        $('.changePasswordBtn').val('转向登录');
			        $('#password').attr('placeholder','请输入新密码');
			        $('.loginForm').addClass('changePassForm');
			        $('#oldPassword').attr("required", "true");
			        $('#confirmPassword').attr("required", "true");
			        $('.loginBtn').val('修改');
                }
		        event.preventDefault();
	        });
        });

	})(jQuery);
</script>
</body>
</html>